<template>
  <sky-base-page ref="basePageRef" :api-obj="qly.api.user.qyxfmx"
                 :params="params" type="list" refresherEnabled padding="0 0 12rpx"
                 :autoLoad="false">
    <template #default="{dataList}">
      <view class="customer-card" v-for="(item,index) in dataList" :key="index">
        <view class="card-row row-between">
          <view class="card-row">
            <view class="label">{{ item.content }}</view>
          </view>
          <view class="card-row">
            <view v-if="item.de_type===1" class="label jia">+</view>
            <view v-else class="label jian">-</view>
            <view v-if="item.de_type===1" class="value jia">{{ item.price }}</view>
            <view v-else class="value jian">{{ item.price }}</view>
          </view>
        </view>
        <view class="card-row">
          <view class="label">创建时间：</view>
          <view class="value">{{ getDateTime(item.time) }}</view>
        </view>
      </view>
      <qly-empty v-if="dataList.length === 0"/>
    </template>
  </sky-base-page>
</template>
<script setup>

import moment from "moment";

const basePageRef = ref()
const params = ref({})


const getDateTime = (data) => {
  return moment.unix(data).format('YYYY-MM-DD HH:mm:ss');
}

const getList = async () => {
  await nextTick()
  basePageRef.value.refresh()
}


qly.page.onLoad((options) => {
  params.value = options
  getList()
})


</script>
<style scoped lang="scss">
.customer-card {
  margin: 12rpx 24rpx;
  background: #fff;
  padding: 24rpx;
  border-radius: 12rpx;

  .card-row {
    display: flex;
    align-items: flex-start;
    line-height: 48rpx;

    .label {
      color: #606266;
    }

    .jia {
      color: #07c160;
    }

    .jian {
      color: red;
    }

    .value {
      flex: 1;
    }

    .red-text {
      color: red;
    }
  }

  .row-between {
    justify-content: space-between;
  }

  .row-center {
    justify-content: center;
  }
}
</style>
